<template>
  <div class="wrap">
    <div class="we-banner">
      <img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/slideshow.png"/>
      <div class="we-product">
        <div class="we-title">
           <img style="width:24px;height:36px" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/adorn.png"/>
          关于大爆炸思维
           <img style="width:24px;height:36px" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/adorn.png"/>
        </div>
        <div class="we-text">
          以“编程是载体，思维建模更重要”为设计思想，研发团队自主研发了全球第一款3D版的图形化编程工具平台，建立围绕计算机科学素养、人工智能素养相关的科普思维建模知识体系，开设编程设计、思维导图、逻辑训练、专注力和记忆力训练、生活中编程等环节，在生动有趣的过程中掌握编程的基础知识和技能，培养逻辑思维、计算思维和创造性思维，提升思维建模能力，建立遇到问题->拆解问题->解决问题的能力。
        </div>
      </div>
    </div>
    <div class="we-main">
      <div class="mission">
        <div class="mission-box"><img class="miss-img" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/aboutMy2.png"/></div>
        <div class="mession-title">
          <div class="English-name">MISSON</div>
          <div class="my-title">我们的使命</div>
          <div class="identifying"></div>
          <div class="we-text">让更多孩子看到更远未来</div>
        </div>
      </div>
      <div class="mission">
        <div class="mission-box"><img class="miss-img" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/aboutMy.png"/></div>
        <div class="mession-title">
          <div class="English-name">VISION</div>
          <div class="my-title">我们的愿景</div>
          <div class="identifying"></div>
          <div class="we-text">与AI时代同向，与国家同荣</div>
        </div>
      </div>
      <!-- 价值观 -->
      <div class="foofer-vision">
        <div class="title">
           <img style="width:24px;height:36px" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/adorn.png"/>
          我们的价值观
           <img style="width:24px;height:36px" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/adorn.png"/>
        </div>
        <div class="we-foofer-list">
          <div class="we-img-box" v-for="item in serveList" :key="item.id">
            <img :src="item.url" class="img"/>
            <div class="value-name">{{ item.name}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="title">合作</div>
      <div class="footer-conter">
        <div class="collaborate">
          <div class="item-conter">
            我们希望与广大商务合作伙伴、渠道伙伴、媒体与自媒体朋友一起，用全新的营销及合作模式共赢。
          </div>
        </div>
        <div class="right-conter">
          <div>人才招聘&nbsp;HPVI@jinlinjishu.com</div>
          <div class="business-collaborate">
            <div>商务合作</div>&nbsp;
            <div>
              <div>韩先生181 2459 6051（微信同号）</div>
              <div>BDVI@JinLinJiShu.com</div>
              <div>*现暂开放微代理模式</div>
            </div>
          </div>
        </div>
       
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      serveList: [
        { 
          id: 1,
          name: '产品至上',
          url: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/myvalue_p1.png' 
        },
        { 
          id: 2,
          name: '服务第一',
          url: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/myvalue_p2.png'
        },
        { 
          id: 3,
          name: '基本功扎实',
          url: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/myvalue_p3.png' 
        },
        {
          id: 4,
          name: '能打胜仗',
          url: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/myvalue_p4.png'
        },
        {
          id: 5,
          name: '保持学习',
          url: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/myvalue_p5.png'
        }
      ],
    }
  }
}
</script>

<style lang="scss" scoped>
    img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .wrap{
    margin-top: 32px;
      .we-banner{
    width: 100%;
    height: 640px;
    position: relative;
    .we-product{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 80px;
      margin: auto;
      width: 980px;
      height: auto;
      background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(20px);
      border: 1px solid #FFFFFF;
      border-radius: 20px;
      padding: 56px 75px 41px 75px;
      text-align: center;
      .we-title{
        font-weight: bold;
        font-size: 45px;
        margin-bottom: 24px;
      }
      .we-text{
        font-size: 22px;
        color: #262626;
        text-align: justify;
      }
    }
  }
  .we-main{
    padding: 75px 360px 139px 360px;
    .mission{
      display: flex;
      align-items: center;
      margin-bottom: 72px;
      .mission-box{
        width: 400px;
        height: 225px;
        .miss-img{
          border-radius: 20px;
        }
      }
      .mession-title{
        margin-left: 48px;
        width: 50%;
        .English-name{
          font-weight: bold;
          font-size: 72px;
          color: #EEEEEE;
          margin-bottom: -65px;
        }
        .identifying{
          width: 68px;
          height: 4px;
          background:  #A7CBFF;
          margin: 8px 0 11px 0;
          border-radius: 1px;
        }
        .my-title{
          font-weight: bold;
          font-size: 32px;
         
        }
        .we-text{
          font-size: 24px;
        }
      }
    }
    .foofer-vision{
      text-align: center;
      .title{
        font-weight: bold;
        font-size: 45px;
        padding: 66px 0 66px 0;
      }
      .we-foofer-list{
        display: flex;
        align-items: center;
        justify-content: center;
        .we-img-box:last-child{
           margin-right: 0;
        }
        .we-img-box{
          margin-right: 84px;
          .img{
            width: 100px;
            height: 124px;
          }
          .img:hover{
            -moz-transform: scale(1.1);
            -webkit-transform: scale(1.1);
            -o-transform: scale(1.1);
          }
          .value-name{
            margin-top: 26px;
            font-weight: bold;
            font-size: 24px;
          }
        }
      }
    }
  }
  .footer{
    width: 100%;
    height: 317px;
    background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/Subtract.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 105px;
    color: #FFFFFF;
    font-weight: 500;
     .title{
       padding-left: 418px;
        font-size: 24px;
      }
    .footer-conter{
      font-size: 20px;
      display: flex;
      justify-content: center;

      .collaborate{
        width: 500px;
        .item-conter{
          font-size: 20px;
        }
      }
      .right-conter{
        margin-left: 96px;
         font-weight: 400;
        .business-collaborate{
          display: flex;
        }
      }
    }
  }
}
</style>